<template>
	<view class="fine-care">
		<navBar :title="$t('fine.care')"></navBar>
		<view class="list-warp">
			<view class="list-item bg_color_f w_90" :class="{ 'active': currentTab === index }"
				v-for="(item,index) in listData" :key="item.id" @click="chooseItem(index)">
				<view>{{item.title}}</view>
				<view class="timer">{{item.time}}</view>
				<view class="icon-active">
					<uni-icons v-if="currentTab === index" type="checkbox-filled" size="15" color="#AF9453"></uni-icons>
				</view>
			</view>
		</view>

		<button :disabled="currentTab === ''" :class="currentTab === '' ? 'btndisabled':''" class="btn w_90 yx"
			@click="openUsernotice">{{$t('home.run')}}</button>
		<view class="reserve" @click="openTimePicker">{{$t('home.reservation')}}</view>
		<!-- 打开时间选择器 -->
		<CustomPicker ref="customTimePicker" @confirm="hanleConfirm"></CustomPicker>

		<!-- 协议弹窗 -->
		<PopupUsernotice ref="usernotice" @confirm="handleUsernotice"></PopupUsernotice>

		<!-- 加载中弹窗 -->
		<uni-popup ref="popup" :mask-click="false"></uni-popup>
	</view>
</template>

<script>
	import CustomPicker from '@/componets/CustomPicker.vue';
	import PopupUsernotice from '@/componets/PopupUsernotice.vue';
	import {
		setDeviceWorkMode,
		createDeviceScheduleTask
	} from '@/api/home.js'
	import {
		pushTemplate
	} from "@/utils/util.js"
	export default {
		components: {
			CustomPicker,
			PopupUsernotice
		},
		data() {
			return {
				sn: '', //设备sn
				currentTab: null, // 当前选中的Tab索引
				listData: [{
						id: 1,
						title: '羊毛',
						time: '60分钟'
					},
					{
						id: 2,
						title: '棉麻',
						time: '55分钟'
					},
					{
						id: 3,
						title: '羽绒',
						time: '50分钟'
					},
					{
						id: 4,
						title: '化纤',
						time: '55分钟'
					},
					{
						id: 5,
						title: '皮草',
						time: '60分钟'
					},
				],
				mode: 0, //工作模式
			};
		},
		onLoad(options) {
			this.sn = options.sn;
		},
		onShow() {
			this.EnglistData();
		},
		methods: {
			EnglistData() {
				this.listData = [{
						id: 1,
						title: this.$t('home.wool'),
						time: this.$t('home.60min'),
					},
					{
						id: 2,
						title: this.$t('home.Cotton-and-linen'),
						time: this.$t('home.55min'),
					},
					{
						id: 3,
						title: this.$t('home.eiderdown'),
						time: this.$t('home.50min'),
					},
					{
						id: 4,
						title: this.$t('home.chemical-fiber'),
						time: this.$t('home.55min'),
					},
					{
						id: 5,
						title: this.$t('home.fur'),
						time: this.$t('home.60min'),
					},
				]
			},
			openTimePicker() {
				console.log(this.currentTab, '1')
				if (this.currentTab != null) {
					this.$refs.customTimePicker.open();
				} else {
					this.config.Toast(this.$t('mode'));
				}
			},
			hanleConfirm(time) {
				let yyTimer = this.config.formatTimeWithDate(time)
				createDeviceScheduleTask({
					sn: this.sn,
					mode: this.mode,
					executeTime: yyTimer
				}).then((r) => {
					console.log('预约==', r)
					if (r.code === 0) {
						this.config.Toast(this.$t('Appointment.successful'));
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/device/device'
							})
						}, 1500)
					}
				}).catch(err => {
					console.log('err==', err)
				})
			},
			// 切换当前选中
			chooseItem(index) {
				this.currentTab = index;
				switch (index) {
					case 0:
						this.mode = 1;
						break;
					case 1:
						this.mode = 2;
						break;
					case 2:
						this.mode = 3;
						break;
					case 3:
						this.mode = 5;
						break;
					case 4:
						this.mode = 6;
						break;
				}
			},
			// 打开同意协议弹窗
			openUsernotice() {
				if (this.currentTab != null) {
					this.$refs.usernotice.open();
				} else {
					this.config.Toast(this.$t('mode'));
				}
			},

			handleUsernotice() {
				// this.$refs.popup.open();
				uni.showLoading({
					title: this.$t('loading')
				});
				pushTemplate().then(() => {
					setDeviceWorkMode({
						sn: this.sn,
						mode: this.mode
					}).then((r) => {
						// this.config.Toast('修改成功');
						console.log('运行', r)
						if (r.code == 0) {
							// 隐藏加载提示
							uni.hideLoading();
							// this.$refs.popup.close();
							uni.setStorageSync('careSn', this.sn);
							uni.switchTab({
								url: '/pages/home/home'
							});
							// this.config.path('/pagesA/home/quickCare/careing?sn=' + this.sn);
						} else {
							uni.hideLoading();
						}
					}).catch(err => {
						this.config.Toast(err.message);
						// uni.hideLoading();
						this.$refs.popup.close()
					})
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.fine-care {
		.list-warp {
			margin-top: 30rpx;

			.list-item {
				padding: 25rpx 40rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				margin-bottom: 25rpx;
				position: relative;

				.timer {
					color: $uni-theme-color;
					font-size: 26rpx;
				}
			}

			.active {
				border: 3rpx solid #AF9453;
			}

			.icon-active {
				position: absolute;
				right: -1px;
				top: -6px;
			}
		}
	}
</style>